<template>
  <div class="container-fluid">
    <div class="common_title">
      文章类别管理
    </div>
    <div class="container-fluid common_con">
      <table
        class="table table-striped table-bordered table-hover mp20 category_table"
      >
        <thead>
          <tr>
            <th>名称</th>
            <th>Slug</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.slug }}</td>
            <td class="text-center">
              <a
                href="javascript:void(0);"
                data-toggle="modal"
                class=" btn btn-info btn-xs"
                @click="editClick(item)"
                >编辑
              </a>
              <a
                href="javascript:void(0);"
                class="btn btn-danger btn-xs"
                @click="deleteClick(item)"
                >删除</a
              >
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3" class="text-center">
              <a
                href="javascript:void(0)"
                class="btn btn-success"
                id="xinzengfenlei"
                data-toggle="modal"
                data-target="#myModal"
                @click="showDialog = true"
                >新增分类</a
              >
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <!-- 模态框 -->
    <el-dialog
      title="文章分类管理"
      :visible="showDialog"
      :modal-append-to-body="false"
    >
      <el-form>
        <el-form-item label="分类名称" label-width="120px">
          <el-input v-model="name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类描述" label-width="120px">
          <el-input v-model="slug" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="doConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//导入接口
import {
  getArticleCategory,
  addArticleCategory,
  editArticleCategory,
  deleteArticleCategory
} from './article.js'

export default {
  name: 'articleCategory',
  data () {
    return {
      list: [],
      showDialog: false, //显示/隐藏 模态框
      name: '', //分类名称
      slug: '', //分类描述
      id: '', //分类id
      isEdit: false //是否是编辑分类
    }
  },
  async created () {
    this.reload()
  },
  methods: {
    /* 请求数据 */
    async reload () {
      //请求数据
      let res = await getArticleCategory()
      console.log(res)
      //绑定数据
      this.list = res.data.data
    },
    /* 点击模态框确认按钮 */
    async doConfirm () {
      if (this.isEdit) {
        //编辑分类
        //(1)发送请求
        let res = await editArticleCategory({
          id: this.id,
          name: this.name,
          slug: this.slug
        })
        console.log(res)
        //(2)弹窗提示
        this.$message('编辑成功')
        //(3)关闭对话框
        this.showDialog = false
        //(4)刷新数据
        this.reload()
        //(5)关闭isEdit开关，否则再点击新增分类，还是执行编辑接口
        this.isEdit = false
        //(6)表单清空
        this.name = ''
        this.slug = ''
      } else {
        //新增分类
        //(1)发送请求
        let res = await addArticleCategory({ name: this.name, slug: this.slug })
        console.log(res)
        //(2)弹窗提示
        this.$message('新增成功')
        //(3)关闭对话框
        this.showDialog = false
        //(4)刷新数据
        this.reload()
      }
    },
    /* 编辑分类 */
    editClick (item) {
      console.log(item)
      //(1)弹出模态框
      this.showDialog = true
      //(2)传入当前编辑的文章分类数据
      this.name = item.name
      this.slug = item.slug
      this.id = item.id
      this.isEdit = true
    },
    /* 删除分类 */
    async deleteClick (item) {
      //(1)调用接口
      let res = await deleteArticleCategory(item.id)
      console.log(res)
      //(2)弹窗提示
      this.$message('删除成功')
      //(3)刷新数据
      this.reload()
    }
  }
}
</script>

<style></style>
